<template>
  <div>
    <div v-if="!isView">
      <!-- :before-upload="beforeAvatarUpload" -->

      <!-- <el-upload
        :show-file-list="false"
        :on-remove="handleRemoveUpload"
        :headers="{ Authorization: this.$store.getters.token }"
        :on-error="handelError"
        :action="action"
        name="file"
        class="avatar-uploader"
      > -->
      <!--        <img v-if="val" :src="val" class="avatar">-->

      <video
        v-if="imageUrl"
        width="100%"
        height="100%"
        :src="imageUrl"
        controls
      ></video>
      <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon" />
      <!-- </el-upload> -->
    </div>
    <div v-if="isView">
      <video width="100%" height="100%" :src="imageUrl" controls></video>
    </div>
    <!-- <div @click="deleteUrl()" v-if="imageUrl">删除</div> -->
  </div>
</template>

<script>
import { Loading } from "element-ui";
export default {
  name: "uploadVideo",
  model: {
    prop: "val",
    event: "cc",
  },
  props: {
    val: {
      type: String,
      default() {
        return "";
      },
    },
    isView: {
      type: Boolean,
      default: false,
    },
    cateId: {
      type: String,
      default() {
        return "";
      },
    },
    objData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      imageUrl: "",
      action: "",
    };
  },
  computed: {},
  watch: {
    val(val) {
      this.init(val);
    },
  },
  created() {
    let params = this.objData;
    let arr = [];
    for (const key in params) {
      arr.push(`${key}=${params[key]}`);
    }
    this.action = `${process.env.BASE_API}/vod/video/upload?${arr.join("&")}`;
  },
  mounted() {
    this.init(this.val);
  },
  methods: {
    deleteUrl() {
      this.imageUrl = "";
      this.$emit("editVideoId", "");
      this.$emit("cc", "");
      // this.$emit("deleteVideo");
    },
    init() {
      if (this.val) {
        this.imageUrl = this.val;
      }
    },
    handleAvatarSuccess(res, fileList) {
      const loading = Loading.service({});
      loading.close(); // 关闭加载前，记得重新定义实例
      console.log(res);
      if (res.code == 200) {
        this.$message.success("上传成功");
        this.imageUrl = res.data.playURL;
        console.log(this.imageUrl);

        this.$emit("editVideoId", res.data.videoId);
        this.$emit("cc", this.imageUrl);
      } else {
        this.$message.error("上传失败");
      }
    },
    // 删除上传的文件
    handleRemoveUpload(file, fileList) {},
    handelError(err, file, fileList) {
      const loading = Loading.service({});
      loading.close(); // 关闭加载前，记得重新定义实例
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
      const types = [
        "video/mp4",
        "video/wmv",
        "video/rmvb",
        "video/3gp",
        "video/mov",
        "video/m4v",
        "video/avi",
        "video/mkv",
        ,
        "video/flv",
        ,
        "video/vob",
        "video/avi",
      ];
      const isJPG = types.includes(file.type);
      const isLt20M = file.size / 1024 / 1024 < 100;

      if (!isJPG) {
        this.$message.error("只能上传视频");
        return false;
      }
      // if (!isLt20M) {
      //   this.$message.error('上传头像视频大小不能超过 20MB');
      //   return false
      // }

      Loading.service({
        fullscreen: true,
        text: "上传中...",
        background: "rgba(0,0,0,.3)",
      });
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  // width: 220px;
  // height: 140px;
  line-height: 140px;
  text-align: center;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  background: #fbfdff !important;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  background: #fbfdff !important;
}
</style>
